<template>
  <div class="fx" id="fx">
    <div class="bts">
      <el-button @click="ResetBz()">查询所有的标注点</el-button>
      <el-button class="cli" @click="clearBz()">清除标注</el-button>
      <el-button class="cli" @click="changeThreejs()">切换3d地图</el-button>
    </div>
    <!-- <dialogs>

    </dialogs> -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>经度:{{ longitude }}</span>
      <span>纬度:{{ latitude }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import dialogs from "./dialogs";

export default {
  data() {
    return {
      dialogVisible: false,
      longitude: "",
      latitude: "",
      views: {},
      template: {},
      position: {},
      list: [
        {
          geometry: {
            type: "point",
            longitude: 113.276728,
            latitude: 23.140092
          },
          symbol: {
            type: "text",
            // url: "http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F91%2F19%2F7156f15fcce238d.jpg%21rw400&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623810347&t=73e960571d7fbc533e7b4cbe7b3000a1",

            text: "标记一",
            // fontsize: "200px",
            color: "red"
            // size: "32px"
          },
          popupTemplate: {
            title: "标记一",
            content: "111"
          }
        },
        {
          geometry: {
            type: "point",
            longitude: 115.276728,
            latitude: 23.140092
          },
          popupTemplate: {
            title: "标记二",
            content:
              "<p>As of 2015, <b>{MARRIEDRATE}%</b> of the" +
              " population in this zip code is married.</p>" +
              "<ul><li>{MARRIED_CY} people are married</li>" +
              "<li>{NEVMARR_CY} have never married</li>" +
              "<li>{DIVORCD_CY} are divorced</li><ul>"
          },
          symbol: {
            type: "text",
            // url: "http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F91%2F19%2F7156f15fcce238d.jpg%21rw400&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623810347&t=73e960571d7fbc533e7b4cbe7b3000a1",
            width: "32px",

            height: "32px",
            text: "标记二",
            // fontsize: "200px",
            color: "red"
            // size: "32px"
          }
        },
        {
          geometry: {
            type: "point",
            longitude: 116.276728,
            latitude: 23.140092
          },
          popupTemplate: {
            title: "标记三",
            content:
              "<p>As of 2015, <b>{MARRIEDRATE}%</b> of the" +
              " population in this zip code is married.</p>" +
              "<ul><li>{MARRIED_CY} people are married</li>" +
              "<li>{NEVMARR_CY} have never married</li>" +
              "<li>{} are divorced</li><ul>" +
              ""
          },
          symbol: {
            type: "text",
            // url: "http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F91%2F19%2F7156f15fcce238d.jpg%21rw400&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623810347&t=73e960571d7fbc533e7b4cbe7b3000a1",
            width: "32px",

            height: "32px",
            text: "标记三",
            // fontsize: "200px",
            color: "red"
            // size: "32px"
          }
        }
      ]
    };
  },
  components: {
    dialogs
  },
  name: "web-map",
  mounted() {
    this.initMaps();
    // this.resetBz();
  },
  //在地图跳转后销毁地图,减少访问资源
  beforeDestroy() {
    if (this.view) {
      this.view.container = null;
    }
  },
  methods: {
    //初始化一个地图
    initMaps() {
      let _self = this;
      //这里需要添加自己所需要功能的依赖,
      loadModules(
        [
          // "esri/layers/TileLayer"
          "esri/Map",
          "esri/views/MapView",
          "esri/views/3d/externalRenderers",
          "esri/layers/FeatureLayer",
          "esri/widgets/BasemapToggle",
          "esri/Graphic", //graphc
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/Color",
          "esri/geometry/support/webMercatorUtils",
          "esri/widgets/AreaMeasurement2D",
          "esri/widgets/BasemapGallery",
          "esri/widgets/Bookmarks",
          "esri/widgets/Compass",
          "esri/widgets/CoordinateConversion",
          "esri/widgets/Editor",
          "esri/widgets/Attribution",
          "esri/widgets/Search",
          "esri/widgets/Sketch",
          "esri/Camera",
          "esri/layers/TileLayer",
          "esri/form/FormTemplate"

          // "esri/widgets/BasemapLayerLis"

          //  'esri/widgets/Fullscreen'
          // 'esri/graphic'
        ],
        // {
        //   url:""
        // },
        { css: true }
      ).then(
        ([
          ArcGISMap,
          MapView,
          FeatureLayer,
          BasemapToggle,
          Fullscreen,
          Graphic,
          webMercatorUtils,
          SimpleMarkerSymbol,
          SimpleLineSymbol,
          Color,
          AreaMeasurement2D,
          BasemapGallery,
          Bookmarks,
          Compass,
          CoordinateConversion,
          Editor,
          Attribution,
          Search,
          Sketch,
          Camera,
          TileLayer
          // webMercatorUtils
        ]) => {
          const map = new ArcGISMap({
            //地图的底层这里一共有17钟 具体的可以参考文档 https://www.cnblogs.com/myfgis/p/5709079.html
            //           dark-gray: "深灰色画布图"
            // gray: "浅灰色画布图"
            // hybrid: "带标注的影像"
            // national-geographic: "国家地理"
            // oceans: "海洋图"
            // osm: "OpenStreetMap"
            // satellite: "影像图"
            // streets: "街道图"
            // streets-navigation-vector: "世界导航图"
            // streets-night-vector: "世界街道图(夜间)"
            // streets-relief-vector: "世界街道图(含地貌)"
            // terrain: "带标注的 Terrain"
            // topo: "地形图"
            basemap: "topo-vector",
            ground: "world-elevation"
          });

          console.log(map);
          console.log(FeatureLayer);
          const view = new MapView({
            container: "fx", //这里是个容器,
            map: map, //实例化一个地图
            center: [113.276728, 23.140092], //地图呈现位置的经纬度
            zoom: 8, //放大的比例
            showLabels: true //是否显示标注
          });
          // const points = [[113.276728, 23.140092]];
          const symbol = {
            type: "text",
            // url: "http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F91%2F19%2F7156f15fcce238d.jpg%21rw400&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623810347&t=73e960571d7fbc533e7b4cbe7b3000a1",
            width: "32px",

            height: "32px",
            text: "标记一",
            // fontsize: "200px",
            color: "red"
            // size: "32px"
          };
          const measurementWidget = new AreaMeasurement2D({
            view: view
          });
          view.ui.add(measurementWidget, "top-right");
          // const featureLayer = new FeatureLayer({
          //   url:
          //     "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/El_Paso_Recreation_AttributeEditsOnly/FeatureServer/1",
          //   outFields: ["*"],
          //   // popupTemplate: template
          // });
          // map.add(featureLayer);
          //添加图层
          // const layer = new TileLayer({
          //   url:
          //     "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
          // });
          // map.add(layer)
          let Ghc = [];
          console.log(_self.list);
          _self.list.map((item, index) => {
            return Ghc.push(new Graphic(item));
          });
          console.log(Ghc, "131213");
          view.graphics.addMany(Ghc);
          // view.ui.add(
          //   new Fullscreen({
          //     view: view,
          //     element: fx
          //   }),
          //   "bottom-right"
          // );
          // console.log(view.graphics.items)
          // view.graphics.on("click",e=>{
          //   console.log(1)
          // })

          // view.graphics.Ghc("hold",e=>{
          //   alert(111)
          // })

          // Ghc.push(
          //   new Graphic({
          //     geometry: this.position, //位置
          //     symbol: symbol, //属性
          //     popupTemplate: this.template //文字描述
          //   })
          // );
          //Bookmarks相关功能
          //显示图标

          view.ui.empty("top-left");
          view.ui.add(
            // 在右上角添加全屏组件
            new Fullscreen({
              view: view
            }),
            "top-right"
          );
          //天地图需要引入天地图的资源文件 这里用来显示不同的地图
          // let basemapGallery = new BasemapGallery({
          //   view: view
          // });
          // // Add widget to the top right corner of the view
          // view.ui.add(basemapGallery, {
          //   position: "top-right"
          // });
          //搜素功能
          const searchWidget = new Search({
            view: view
          });
          // Adds the search widget below other elements in
          // the top left corner of the view
          view.ui.add(searchWidget, {
            position: "top-left",
            index: 2
          });
          const polyline = {
            type: "polyline", // autocasts as new Polyline()
            paths: [
              [113.276728, 23.140092],
              [115.276728, 23.140092],
              [116.276728, 25.140092],
              [112.276728, 25.140092],
              [113.276728, 23.140092]
            ]
          };
          const polylineSymbol = {
            // type: "simple-line",
            type: "arrow",
            // autocasts as SimpleLineSymbol()
            color: [100, 119, 40],
            width: 2
          };

          const polylineAtt = {
            Name: "Keystone Pipeline",
            Owner: "TransCanada"
          };

          const polylineGraphic = new Graphic({
            geometry: polyline,
            symbol: polylineSymbol,
            attributes: polylineAtt
          });

          view.graphics.add(polylineGraphic);

          //esri/camera试用
          const cam = new Camera({
            heading: 140, // face due east
            tilt: 135, // looking from a bird's eye view
            position: {
              latitude: 113.276728,
              longitude: 23.140092,
              z: 20000,
              spatialReference: { wkid: 4547 }
            }
          });
          view.goTo(cam);

          console.log(view.camera);

          // let graphic = new Graphic();
          // graphic.attributes = {
          //   name: "Spruce",
          //   family: "Pinaceae",
          //   count: 126
          // };

          // view.graphics.add(graphic);

          // console.log(view, "axsxasx");
          // console.log(sls, "dadadasd");
          // view.graphics.add(sls);

          // view.graphics.add(sls);
          //  指南针用来判定方向
          // let compass = new Compass({
          //   view: view,
          // });
          // view.ui.add(compass, "top-left");
          //测量实时位置
          // let ccWidget = new CoordinateConversion({
          //   view: view
          // });

          // // Adds widget in the bottom left corner of the view
          // view.ui.add(ccWidget, "bottom-left");
          //编辑功能
          // const editor = new Editor({
          //   layerInfos: [
          //     {
          //       view: view,
          //       // layer: featureLayer, // pass in the feature layer
          //       fieldConfig: [
          //         // Specify which fields to configure
          //         {
          //           name: "fulladdr",
          //           label: "Full Address"
          //         },
          //         {
          //           name: "neighborhood",
          //           label: "Neighborhood"
          //         }
          //       ],
          //       enabled: true, // default is true, set to false to disable editing functionality
          //       addEnabled: true, // default is true, set to false to disable the ability to add a new feature
          //       updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
          //       deleteEnabled: false // default is true, set to false to disable the ability to delete features
          //     }
          //   ]
          // });
          // view.ui.add(editor, "bottom-left");
          // 地图下方的所有权

          //点击获得经纬度坐标
          // const attribution = new Attribution({
          //   attributionText: "e3223324"
          // });
          // view.ui.components = ["attribution"];

          this.views = view;
          view.on("hold", e => {
            _self.dialogVisible = true;
            console.log(e);
            // console.log(webMercatorUtils);

            // console.log(e.mapPoint.longitude, e.mapPoint.latitude);
            _self.longitude = e.mapPoint.longitude;
            _self.latitude = e.mapPoint.latitude;

            // let geom = [];
          });

          // console.log(view);
        }
      );
    },

    //修改地图上的标注
    // ResetBz() {
    //   console.log(this.views);
    //   this.views = {};
    //   console.log(this.longitude, this.latitude);
    //   let position = {
    //     type: "point",
    //     longitude: 113.276728,
    //     latitude: 23.140092
    //     //   [117.413797, 31.754178]
    //     //  [117.375595, 31.810499]
    //     //  [117.2939, 31.8647]
    //   };
    //   let template = {
    //     title:
    //       "这是广州，广州别名羊城，简称穗，广东省省会，是华南政治、经济、文化、科技和交通中心，我国著名的沿海开放城市和国家综合改革试验区，中国第三大城市。气候温和，雨量充沛，四季常青，风光旖旎，素有“花城”之美誉。",
    //     // color:"red",
    //     content: [
    //       {
    //         // Pass in the fields to display
    //         //  type: "fields",
    //         //  fieldInfos: [{
    //         //    fieldName: "NAME",
    //         //    label: "Name"
    //         //  }, {
    //         //    fieldName: "REGION",
    //         //    label: "Region"
    //         // }]
    //       }
    //     ]
    //   };
    //   this.position = position;
    //   this.template = template;
    //   this.initMaps();
    // },

    //在地图上画圆
    paintCircle() {},
    //清除点坐标
    clearBz() {
      this.position = {};
      this.template = {};
      this.initMaps();
    },
    changeThreejs() {
      this.$router.push("./ThreeMap");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fx {
  padding: 0;
  margin: 0;
  width: 1920px;
  height: 920px;
}
.bts {
  position: absolute;
  display: flex;
  left: 60%;
  top: 20px;

  opacity: 0.7;
  border-radius: 10%;
  border: none;
  width: 220px;
  height: 50px;
  color: white;
}
button {
  background: blue;
  color: white;
}
/* button  .cli{

margin-left:5px;
background: red;
color:white;
} */
/* button {
  width: 50%;
  color: white;
  background: red;
} */
</style>
